<template>
  <div class="yy-detail">
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card class="box-card">
          <div><strong>实名信息</strong></div>
          <ul>
            <li>&emsp;客户编号&emsp;&emsp;{{data.auth.platCustNo}}</li>
            <li>&emsp;真实姓名&emsp;&emsp;{{data.auth.custName}}</li>
            <li>&emsp;证件号码&emsp;&emsp;{{data.auth.idNo}}</li>
            <li>&emsp;证件类型&emsp;&emsp;{{typeFormat(data.auth,'idType')}}</li>
            <li>&emsp;审核状态&emsp;&emsp;{{typeFormat(data.auth,'checkStat')}}</li>
            <li>&emsp;预付账户&emsp;&emsp;{{data.account.bal==='0.00'?'0':data.account.bal}}</li>
            <li>&emsp;创建时间&emsp;&emsp;{{data.auth.createtime|dateFilter}}</li>
          </ul>
        </el-card>
      </el-col>
    </el-row>


    <el-row style="margin-top: 20px;">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="5" v-for="item in data.userList">
        <el-card class="box-card" style="margin-right: 20px;">
          <div><strong>{{typeFormat(item,'role')}}</strong></div>
          <ul>
            <li>&emsp;用户昵称&emsp;&emsp;{{item.nickname}}</li>
            <li>&emsp;手机号码&emsp;&emsp;{{item.mobile}}</li>
            <li>&emsp;账户余额&emsp;&emsp;{{item.balance|currencyFilter}}</li>
            <li>不可用余额&emsp;&emsp;{{item.freezebalance|currencyFilter}}</li>
            <li>&emsp;创建时间&emsp;&emsp;{{item.createtime|dateFilter}}</li>
          </ul>
        </el-card>
      </el-col>
    </el-row>


  </div>
</template>

<script>
  import {user} from "@/api/main/financial/user";

  export default {
    props: {
      tfsId: {
        type: Number,
        require: true
      }

    },
    data() {
      return {
        data: {
          auth: {},
          account:{}
        },
        idTypeOptions: [],
        checkStatOptions: [],
        roleOptions: []
      }
    },
    created() {
      this.getDicts("yy_financial_idType").then(response => {
        this.idTypeOptions = response.data;
      });

      this.getDicts("yy_financial_checkStat").then(response => {
        this.checkStatOptions = response.data;
      });

      this.getDicts("yy_user_role").then(response => {
        this.roleOptions = response.data;
      });
      user({id: this.tfsId}).then(response => {
        console.log(this.data);
        this.data = response.data;
      });
    },
    methods: {
      typeFormat(row, column) {
        let option;
        if (column === 'idType') {
          option = this.idTypeOptions;
        } else if (column === 'checkStat') {
          option = this.checkStatOptions;
        } else {
          option = this.roleOptions;
        }
        return this.selectDictLabel(option, row[column]);
      },
    }
  }
</script>

<style scoped>
  .yy-detail ul {
    padding: 0;
    margin: 0;
  }

  .yy-detail ul li {
    list-style: none;
    margin-top: 15px;
    font-size: 15px;
  }

</style>
